<template>
  <ContentWrap>
    <el-row :gutter="40" class="view-wrap">
      <!-- 左侧地图 -->
      <el-col :span="12">
        <Map ref="mapRef" @return="returnHandle" @go-down="mapGoDown" @city-select="selectCity" />
      </el-col>
      <!-- 右侧表格 -->
      <el-col :span="12">
        <div class="table-wrap">
          <el-table v-loading="loading" :data="tableData" row-key="areaId" border>
            <el-table-column type="index" width="70" label="序号" align="center" />
            <el-table-column :label="isDeptType ? '归属机构' : '所属城市'" align="center">
              <template #default="scope">
                <el-button link type="primary" @click="clickHandle(scope.row)" v-if="!isDeptType">
                  {{ scope.row.areaName }}
                </el-button>
                <span v-else> {{ scope.row.areaName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="dbCount"
              width="200"
              label="数据库资产"
              align="center"
              sortable
            />
            <el-table-column
              prop="fileCount"
              width="200"
              label="文件资产"
              align="center"
              sortable
            />
          </el-table>
        </div>
        <!-- 分页 -->
        <Pagination
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.page"
          :total="total"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </ContentWrap>
</template>

<script setup lang="ts">
import Map from './components/MapChart.vue'
import { getAreaStatistics } from '@/api/areaView'

defineOptions({ name: 'AreaView' })

const mapRef = ref<InstanceType<typeof Map>>()

const total = ref(10) // 列表的总页数
const loading = ref(false) // 列表的加载中
const tableData = ref([]) // 列表的数据
const isDeptType = ref(false)

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  provinceId: ''
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const { count, data } = await getAreaStatistics(toRaw(queryParams))
    tableData.value = data
    total.value = count
  } finally {
    loading.value = false
  }
}

function clickHandle(row: any) {
  const history = mapRef.value?.getHistory()

  if (history && history.length > 1) {
    //表格二级层级以上
    setIdList(row.areaId, true)
    setMapActive(row.areaName)
  } else {
    mapRef.value?.goDown({ code: row.areaId, name: row.areaName })

    setIdList(row.areaId)
  }
}

function returnHandle() {
  setIdList()
}

function mapGoDown({ code }) {
  setIdList(code)
}

function selectCity({ code, unSelect }) {
  if (unSelect) {
    const history = mapRef.value?.getHistory()
    if (history && history.length > 1) {
      setIdList(history[history.length - 1].code)
    }
  } else {
    setIdList(code, true)
  }
}

async function setIdList(provinceId?: string, isDept?: boolean) {
  queryParams.provinceId = provinceId || ''
  queryParams.page = 1
  await getList()
  isDeptType.value = !!isDept
}

function setMapActive(name: string) {
  mapRef.value?.setMapActive(name)
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.table-wrap {
  padding-top: 30px;
  min-height: 460px;
}
</style>
